import React, { useEffect } from 'react'
import { Button, Card,  Form, Input,message} from 'antd';
import style from '../index.module.css'

import type {addHospitalParamType} from '@/api/hospital/model/userType'
import {addHospitalRequest,
  getHosSetFromIdRequest,
  updateHosSetFromIdRequest
} from '@/api/hospital/hospitalSet'

import { useNavigate, useParams } from 'react-router-dom';

export default function AddOrUpdateHosSet() {
  const navigate = useNavigate() 
  //Form.useFormInstance 获取当前上下文正在使用的Form实例
  //通过Form组件上的一个useForm方法,可以创建一个form实例,
  //然后再某一个Form组件上添加一个Form属性在下面谁使用给谁添加进行关联,
  //值为当前实例呢么Form表单和当前form实例就关联起来了(相当于数组结构)
  const [form] = Form.useForm()
  console.log(form);
  
  // 拿取params的id  用了id才能知道是那条数据
  const {id} = useParams();
 console.log(id,'ddd');

 //因为是复用组件 在新增医院的时候不需要刚进入就发送请求,所以我们要判断当前是否有id有两种方式进这个组件一种是添加按钮 一种是修改
 useEffect(() => {
  if (id) {
    //这里包裹一个函数因为 没法直接在useEffect后面async异步请求 所以包裹 
    const getHosDetail= async () => {
   //发送请求
   const result = await getHosSetFromIdRequest(id)
   //console.log(result);
   //Form实例上有个setFileValue方法,
   //可以把一个对象的值通过key和表单的name一一对应的形式添加到表单里
   form.setFieldsValue(result)
 }
 getHosDetail()
  }
 })
   //1.新增医院的事件回调函数
  const addHosFinishHandle = async (fieldValue:addHospitalParamType) => {
    //判断当前组件中是否存在id 如果有则代表修改,没有则代表新增
    if(id){
     await updateHosSetFromIdRequest({...fieldValue,id});
      ///新增修改成功以后返回设置页面
     navigate("/syt/hospital/hospitalSet")
     message.success("修改数据成功")
    } else{
         //发送新增请求
   await addHospitalRequest(fieldValue)
   ///新增成功以后返回设置页面
   navigate("/syt/hospital/hospitalSet")
   message.success("新增数据成功")
    }
  }

   //2.点击返回事件回调函数
   const goBackHandle = () => {
    navigate(-1)
   }
      return (
        // span: 18, 占据多少位置
        <Card>
        <Form
        //多个form 以后操作这个form就是操作当前的表单
          form={form}
          name="basic"
          labelCol={{span: 3,}}
          wrapperCol={{span: 18,}}
          onFinish={addHosFinishHandle}
        //   initialValues={{
        //     remember: true,
        //   }}默认值不用
    //    表格前面*号显示是From表单中rules的属性
        >
          <Form.Item
            label="医院名称"
            name="hosname"
            //校验规则 rules={[{ required: true, message: 'Please input your username!' }]}
           // transform	将字段值转换成目标值后进行校验 (value)当前取得值  是拿到值再去校验
            rules={[{
           required: true, 
            message: '请输入医院名称', 
            transform(value){
              return value.trim()
            }
          }]}
            
          >
            <Input />
          </Form.Item>
          
          <Form.Item
            label="医院编号"
            name="hoscode"
            rules={[{ required: true, message: '请输入医院编号' ,  transform(value){
              return value.trim()
            }}]}
          >
            <Input />
          </Form.Item>
          
          <Form.Item
            label="api基础路径"
            name="apiUrl"
            rules={[{ required: true, message: '请输入api基础路径',  transform(value){
              return value.trim()
            } }]}
          >
            <Input />
          </Form.Item>
          
          <Form.Item
            label="联系人姓名"
            name="contactsName"
            rules={[{ required: true, message: '请输入联系人姓名' ,  transform(value){
              return value.trim()
            }}]}
          >
            <Input />
          </Form.Item>
          
          <Form.Item
            label="联系人手机"
            name="contactsPhone"
            rules={[{ required: true, message: '请输入联系人手机',  transform(value){
              return value.trim()
            } }]}
            // rules={[
            //   {
            //     required: true,
            //     message: 'Please input your password!',
            //   },
            // ]} 
          >
            <Input/>
          </Form.Item>
    
        
          {/* //offset: 3,离左边为3 */}
          <Form.Item
            wrapperCol={{
              offset: 3,
              span: 16,
            }}
          >
            <Button 
            type="primary" 
            htmlType="submit" 
            className={style.mr}>
             提交
            </Button>
            <Button 
            type="primary"
             htmlType="button"
              onClick={goBackHandle}>
            返回
            </Button>
          </Form.Item>
        </Form>
        </Card>
      );
}




